<!--   侦听器   -->
<script setup>
import { reactive, ref, watch } from 'vue';


let count   =ref(0);

let stu  =ref({sno:1,sname:"zhw"});

let teacher  =reactive({tno:1,tname:"zhw"});


// 希望每次修改的时候，获得 关注的属性的修改前和修改后的数据
// 监听
watch(count,function(newValue,oldValue){

        console.log("修改前的值："+oldValue);
        console.log("修改后的值："+newValue);

});


watch(
    stu, // 监测对象（属性）
    function(newValue,oldValue){ // 触发 函数 

console.log("student 修改前的值：",oldValue);// 以对象为监测点，
console.log("student 修改后的值：",newValue);
// 传地址问题：oldValue 执行修改前，获得对象（它认为是旧的）  newValue 修改后，重新去拿 对象（新的）
// 都指向的是对象： oldValue 对象的值已经变成新的值了

},
{deep:true}// 可选：浅监视（不改这个对象，就不会触发）  、加上  深监视 （只要修改到对象中的数据，包括只修改属性，都会检测到） 
);


// 监听  reactive 类型 响应对象  默认 深程度的
watch(
    teacher, // 监测对象（属性）
    function(newValue,oldValue){ // 触发 函数 

console.log("teacher 修改前的值：",oldValue);
console.log("teacher 修改后的值：",newValue);

});

// watch(
//     teacher.tno, // 监测对象（属性）
//     function(newValue,oldValue){ // 触发 函数 

// console.log("teacher tno 修改前的值：",oldValue);
// console.log("teacher tno 修改后的值：",newValue);

// });

watch(
    teacher.tno, // 监测对象（属性）
    (newValue,oldValue)=>{ // 触发 函数 

console.log("teacher tno 修改前的值：",oldValue);
console.log("teacher tno 修改后的值：",newValue);

});






function changeSno(){
    stu.value.sno++;
}

function changeSname(){
    stu.value.sname+="~";
}

function changeStudent(){

   stu.value={sno:100,sname:"bai"};
}



function changeTno(){
   teacher.tno++;
}

function changeTname(){
    teacher.tname+="~";
}

function changeTeacher(){
    console.log("changeTeacher");
//    teacher=reactive({tno:100,tname:"bai"});
    teacher=reactive({tno:111,tname:"zhw11"});
}




</script>


<template>

    {{ count }}
    
    <button @click="count++">点一下</button>

    <button @click="changeSno">修改学号</button>
    <button @click="changeSname">修改姓名</button>
    <button @click="changeStudent">修改整个学生</button>


    <button @click="changeTno">修改教师号</button>
    <button @click="changeTname">修改教师姓名</button>
    <button @click="changeTeacher">修改整个教师</button>

</template>